<template>
	<view>
		<checkBranch />
		<view class="old-content  pad-16r">
			<view v-for="(item,index) in dataSource" class="item">
				<view @click="toPagePath(item.path)">
					<image class="img-path" :src="hostApi+item.pathImg"></image>
					<view>{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="center">
			<view class="btn-old" @click="showModal=true">
				退出长辈模式
			</view>
		</view>
		<Dialog :show="showModal" @confirm="confirm" @close="close" title="温馨提示" :mask-close-able="true">
			<view class="slot-content">
				<view class="text-center">
					是否退出长辈模式?
				</view>

			</view>
		</Dialog>
	</view>
</template>

<script>
	import {
		mapGetters,
	} from 'vuex';
	import checkBranch from "@/components/checkBranch/checkBranch.vue"
	import Dialog from '@/components/Dialog/Dialog.vue'
	import {
		menuSelect
	} from '../../../api/menu';

	export default {
		components: {
			Dialog,
			checkBranch
		},
		mounted() {
			this.init();
		},
		data() {
			return {
				dataSource: [],
				showModal: false,
			}
		},
		computed: {
			...mapGetters([
				'hostApi'
			])
		},
		methods: {
			init() {
				menuSelect({
					codes: ['oldModelCenter'],
					status: 1,
					orderBy: 'sort '
				}).then(res => {
					res=res.oldModelCenter
					res.forEach(item => {
						if (item.parentId != 0) {
							this.dataSource.push(item)
						}
					})
				})

			},
			toPagePath(path) {
				uni.navigateTo({
					url: path
				})
			},
			confirm() {
				this.showModal = false
				uni.navigateBack(1)
			},
			close() {
				this.showModal = false;
			}
		}
	}
</script>

<style scoped>
	.old-content {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		gap: 16rpx
	}
	
	.item {
		width: 47%;
		text-align: center;
		font-size: 30px;
		/* margin: 10px; */
	}
	

	.img-path {
		width: 100px;
		height: 100px;
	}

	.btn-old {
		text-align: center;
		font-size: 35px;
		border: 1px solid gray;
		width: 85%;
		border-radius: 10px;
		margin: 20px 0;
		padding: 10px;
	}
</style>